import { Drawer as MuiDrawer } from '@mui/material';
import classNames from 'classnames';
import { useContext, useRef, useState } from 'react';
import { useSelector } from 'react-redux';
import { useLocation, useNavigate } from 'react-router-dom';
import { Page } from '../../constant/Page';
import { ThemeContext } from '../../context/ThemeContext';
import useNav from '../../hook/useNav';
import IcArrowRight from '../../image/ic-arrow-right.svg';
import IcLogo from '../../image/ic-logo.png';
import { RootState } from '../../redux/store';
import Button from '../Button';
import style from './Drawer.module.scss';
// import MenuLanguage from './MenuLanguage';

type Props = { open: boolean; onClose: () => void };

const Drawer = ({ open, onClose }: Props) => {
    const [langOpen, setLangOpen] = useState<boolean>(false);
    const langRef = useRef<HTMLDivElement>(null);
    const location = useLocation();
    const navigate = useNavigate();
    const nav = useNav();
    const {
        toggleTheme,
        image: { IcAnnouncement, IcAnnouncementRed, IcTheme },
    } = useContext(ThemeContext);
    const {
        auth: { accountInfo },
        ui: { unreadAnnouncement },
    } = useSelector((rootState: RootState) => rootState);

    const onNavigate = (path: string) => () => {
        navigate(path);
        onClose();
    };

    return (
        <>
            <MuiDrawer anchor="left" open={open} onClose={onClose} classes={{ paper: style.self }}>
                <div className={style.logo}>
                    <img src={IcLogo} />
                </div>
                <div className={style.user}>{accountInfo?.FUserName ?? '-'}</div>
                <div className={style.icons}>
                    <img src={IcTheme} onClick={toggleTheme} />
                    <img
                        src={unreadAnnouncement > 0 ? IcAnnouncementRed : IcAnnouncement}
                        onClick={onNavigate(Page.Announcement)}
                    />
                </div>
                {nav.map((v) => (
                    <div
                        key={v.id}
                        className={classNames(style.nav, {
                            [style.selected]: location.pathname.startsWith(v.path),
                        })}
                        onClick={onNavigate(v.path)}
                    >
                        <img src={v.img} />
                        <div>{v.value}</div>
                    </div>
                ))}

                <div className={style.item}>
                    <Button appearance="text" className={style.logout} onClick={onNavigate(Page.SignOut)}>
                        登出
                    </Button>
                </div>
            </MuiDrawer>
        </>
    );
};

export default Drawer;
